

/**
* 
* @authors lwd (495986719@qq.com)
* @date    2018-02-01 16:39:05
* @version v.1.0.1
* @params     {
           "btnName" : "imgs_ul",    //包含li->img标签的父元素，可以是id或者class
           "scaleSmall" : 1,        //手机，手动缩放图片的最小缩小倍数,默认1
           "scaleBig" : 4            //手机，手动缩放图片的最大放大倍数,默认4
       }
*/

var showImagesFn = {
    "init": function (json) {
        this.btnName = json.btnName;
        this.scaleBig = json.scaleBig || 4;//最大放大倍数
        this.scaleSmall = json.scaleSmall || 1;//最小缩小倍数
        this.end = json.end || function () { };
        this.winWidth = $(window).width();
        this.winHeight = $(window).height();
        this.imgWrapWidth = $(window).width() > 640 ? 640 : $(window).width();
        this.index = 0;
        this.scaleArray = [];
        this.touchMethod = 0;
        this.showImagesContainer();
        return this;
    },
    "getUrls": function (child) {
        var lis = $(child).parent().find("li");
        var scope = this;
        lis.each(function () {
            var img = $(this).find("img");
            if (img.parent().hasClass("MIDIV")) {
                var url = img.parent().attr("data-src");
            } else {
                var url = $(this).find("img").attr("src");
            }
            scope.urls.push(url);
        });
        this.length = this.urls.length;
    },
    "setHtml": function () {
        var section = $('<section style="position: fixed; width: 100%; height: 100%;bottom: -100%; z-index: 1001; left: 0;"></section>');
        this.section = section;
        this.cover = $('<div class="showImages_cover" style="position: fixed; width: 100%; height: 100%; z-index: 1000; background-color: #000; top: 0;"></div>');
        this.container = $('<div class="showImagesCotainer" style="position: absolute; top: -100%; height:100%; width: 100%; left: 0; z-index: 1001;"></div>');
        var head = $('<div class="showImagesHead" style="height: 44px; line-height: 44px; text-align: center; font-size: 14px; color: #fff; position: relative; z-index: 3;"></div>');
        this.nowIndex = $('<span class="showImagesNowIndex" style="margin-right: 3px;">1</span>');
        this.totalImgs = $('<span class="showImagesTotalImgs" style="margin-left: 3px;"></span>');
        this.totalImgs.html(this.length);
        head.append(this.nowIndex);
        head.append("/");
        head.append(this.totalImgs);
        this.container.append(head);
        this.body = $('<div class="showImagesBody" style="position: absolute; z-index: 2; top: 0; bottom: 0; width: 100%;overflow:hidden;"></div>');
        var ul = $('<ul class="showImagesUl" style="position:absolute;height:100%;left:0;top:0;"></ul>');
        ul.css({
            "width": this.winWidth * this.length
        });
        this.ul = ul;
        var prop = this.imgWrapWidth / this.winHeight;
        var scope = this;
        scope.loadImg(0);
        this.body.append(ul);
        this.container.append(this.body);
        section.append(this.cover);
        section.append(this.container);
        this.shutDown = $('<div class="showImagesShutDown"></div>');
        this.shutDown.css({
            "width": "30%",
            "height": "44px",
            "position": "absolute",
            "z-index": "1002",
            "left": "0",
            "top": "-100%"
        });
        var span = $('<span></span>')
        span.css({
            "display": "block",
            "width": "14px",
            "height": "14px",
            "border-left": "1px solid #fff",
            "border-top": "1px solid #fff",
            "transform": "rotate(-45deg)",
            "position": "absolute",
            "left": "14px",
            "top": "14px"
        });
        this.shutDown.append(span);
        section.append(this.shutDown);
        $(document.body).append(section);
        var scope = this;
        this.ul.on("touchstart", function (e) {
            scope.slideTouchStart(e, scope);
        });
        this.ul.on("touchmove", function (e) {
            scope.slideTouchMove(e, scope);
        });
        this.ul.on("touchend", function (e) {
            scope.slideTouchEnd(e, scope);
        });
        this.ul.on("mousedown", function (e) {
            scope.mouseDown(e, scope);
        });
        this.ul.on("mousemove", function (e) {
            scope.mouseMove(e, scope);
        });
        this.ul.on("mouseup", function (e) {
            var e = e || window.event;
            scope.mouseUp(e, scope);
            var upX = e.clientX;
            var upY = e.clientY;
            if (Math.abs(upX - scope.mouseX) < 1 && Math.abs(upY - scope.mouseY) < 1) {
                scope.hideContainer();
            }
        });
    },
    "loadImg": function (i) {
        var scope = this;
        var img = new Image();
        img.src = scope.urls[i];
        img.onerror = function () {
            if (WST) {
                var bakSrc = WST.ROOT + "/Public/wap/images/loadFail.png";
            } else {
                var bakSrc = "/Public/wap/images/loadFail.png";
            }
            scope.setLi(this, scope, bakSrc);
            if (i < scope.length - 1) {
                scope.loadImg(i + 1);
            }
        }
        img.onload = function () {
            scope.setLi(this, scope);
            if (i < scope.length - 1) {
                scope.loadImg(i + 1);
            }
        }
    },
    "setLi": function (thisImg, scope, src) {
        var width = thisImg.naturalWidth;
        var height = thisImg.naturalHeight;
        var li = $('<li style="float:left;"></li>');
        li.css({
            "width": scope.winWidth,
            "height": scope.winHeight,
            "position": "relative",
            "display": "-webkit-box",
            "vertical-align": "middle",
            "-webkit-box-pack": "center",
            "-webkit-box-align": "center"
            // ,"-webkit-transform" : "scale(2)"
        });
        var imgElement = $("<img />");
        src = src || thisImg.src;
        imgElement.attr({ "src": src }).css({
            "max-width": "100%",
            "max-height": "100%",
            "display": "block",
            "overflow": "hidden"
        });
        li.append(imgElement);
        scope.ul.append(li);
        scope.scaleArray.push(1);
    },
    "winResize": function () {
        var scope = this;
        $(window).resize(function () {
            scope.winWidth = $(window).width();
            scope.winHeight = $(window).height();
            scope.imgWrapWidth = $(window).width() > 640 ? 640 : $(window).width();
            scope.ul.css({
                "width": scope.winWidth * scope.length,
                "height": scope.winHeight,
                "left": -scope.winWidth * scope.index
            });
            scope.ul.find("li").css({
                "width": scope.winWidth,
                "height": scope.winHeight
            });
        });
    },
    "showImagesContainer": function () {
        var scope = this;
        var btn = $("#" + this.btnName).length > 0 ? "#" + this.btnName : "." + this.btnName;
        var mouseMoveHappen = false;
        $(document).on("mousemove", function () {
            mouseMoveHappen = true;
        });
        $(document).on("mousedown", function () {
            mouseMoveHappen = false;
        });
        $(document).on("click", btn + " li", function () {
            scope.btnBom = $(this).closest(btn);
            if (!mouseMoveHappen) {
                scope.urls = [];
                scope.getUrls(this);
                scope.index = $(this).index();
                var scrollTop = $(window).scrollTop();
                var left = ($(window).width() - $(document.body).width()) / 2;
                $(document.body).css({ "position": "fixed", "top": "-" + scrollTop + "px", "left": left });
                scope.setHtml();
                scope.hideImagesContainer();
                scope.ul.css({
                    "left": -scope.winWidth * scope.index
                });
                scope.nowIndex.html(scope.index + 1);
                scope.winResize();
            }
        });
    },
    "hideImagesContainer": function () {
        var scope = this;
        this.shutDown.click(function () {
            scope.hideContainer();
        });
    },
    "hideContainer": function () {
        var top = -parseFloat($(document.body).offset().top);
        $(document.body).css({ "position": "initial" });
        $(window).scrollTop(top);
        for (var i = 0; i < this.length; i++) {
            this.scaleArray[i] = 1;
        }
        try {
            this.section.remove();
          } catch (e) {
            console.log("zoom问题");
          }
   
        this.end && this.end(this.index, this.btnBom);
        // console.log(123)
    },
    "slideTouchStart": function (e, scope) {
        var touch = e.originalEvent.changedTouches[0];
        scope.startX = touch.clientX;
        scope.startY = touch.clientY;
        scope.ulLeft = parseFloat(scope.ul.css("left"));
        scope.ulTop = parseFloat(scope.ul.css("top"));
        scope.touchMethod = 1;
        try {
            scope.dis = [];
        } catch (e) {
            alert('touchSatrtFunc：' + e.message);
        }
    },
    "mouseDown": function (e, scope) {
        var e = e || window.event;
        scope.mouseX = e.clientX;
        scope.mouseY = e.clientY;
        scope.ulLeft = parseFloat(scope.ul.css("left"));
        scope.ulTop = parseFloat(scope.ul.css("top"));
        scope.mouseStart = 1;
    },
    "mouseMove": function (e, scope) {
        var e = e || window.event;
        e.preventDefault();
        if (scope.mouseStart === 1) {
            scope.mX = e.clientX;
            scope.mY = e.clientY;
            var dx = scope.mX - scope.mouseX;
            var dy = scope.mY - scope.mouseY;
            var left;
            //过度距离
            var boundDis = 10;
            //超越距离
            var switchDis = 30;
            left = scope.ulLeft + dx;
            scope.ul.css({
                "left": left
            });
        }
    },
    "slideTouchMove": function (e, scope) {
        e.preventDefault();
        var evt = e.originalEvent;
        var touch = evt.touches[0];
        if (evt.touches.length === 1 && scope.touchMethod === 1) {
            scope.dX = touch.clientX;
            scope.dY = touch.clientY;
            var dx = scope.dX - scope.startX;
            var dy = scope.dY - scope.startY;
            var boundLeft = scope.winWidth * (scope.scaleArray[scope.index] - 1) / 2 - scope.winWidth * scope.index;
            var boundRight = -scope.winWidth * (scope.scaleArray[scope.index] - 1) / 2 - scope.winWidth * scope.index;
            var boundTop = scope.winHeight * (scope.scaleArray[scope.index] - 1) / 2;
            var left, top;
            //过度距离
            var boundDis = 10;
            //超越距离
            var switchDis = 30;
            if (scope.scaleArray[scope.index] > 1) {
                if (scope.ulTop + dy >= boundTop + boundDis) {
                    top = boundTop + boundDis;
                } else if (scope.ulTop + dy <= -boundTop - boundDis) {
                    top = -boundTop - boundDis;
                } else {
                    top = scope.ulTop + dy;
                }
                if (scope.ulLeft + dx >= boundLeft + boundDis) {
                    //放大时向右滑
                    var bdx = scope.ulLeft + dx - ((boundLeft + boundDis));
                    left = boundLeft + boundDis + bdx / 10;
                    if (left > boundLeft + switchDis) {
                        scope.scaleArray[scope.index] = 1;
                        top = 0;
                        if (scope.index > 0) {
                            scope.ul.find("li").eq(scope.index - 1).css({
                                "z-index": 1
                            }).siblings().css({
                                "webkitTransform": 'scale(1)',
                                "z-index": 0
                            });
                        }
                    }
                } else if (scope.ulLeft + dx <= boundRight - boundDis) {
                    //放大时向左滑
                    var bdx = scope.ulLeft + dx - (boundRight - boundDis);
                    left = boundRight - boundDis + bdx / 10;
                    if (left < boundRight - switchDis) {
                        scope.scaleArray[scope.index] = 1;
                        top = 0;
                        if (scope.index < scope.length - 1) {
                            scope.ul.find("li").eq(scope.index + 1).css({
                                "z-index": 1
                            }).siblings().css({
                                "webkitTransform": 'scale(1)',
                                "z-index": 0
                            });
                        }
                    }
                } else {
                    left = scope.ulLeft + dx;
                }
                scope.ul.css({
                    "top": top
                });
                scope.ul.css({
                    "left": left
                });
            } else {
                left = scope.ulLeft + dx;
                scope.ul.css({
                    "left": left
                });
            }
        } else if (evt.touches.length === 2) {
            scope.touchMethod = 2;
            try {
                var x = Number(touch.clientX); //页面触点X坐标
                var y = Number(touch.clientY); //页面触点Y坐标
                if (evt.targetTouches.length == 2) {
                    var touch1 = evt.targetTouches[1]; //获取第2个触点
                    var x1 = Number(touch1.clientX); //页面触点X坐标
                    var y1 = Number(touch1.clientY); //页面触点Y坐标
                    scope.dis.push(Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2)));
                    if (scope.dis.length > 1) {
                        scope.scaleArray[scope.index] -= 0.05 * (scope.dis[scope.dis.length - 2] - scope.dis[scope.dis.length - 1]);
                        if (scope.scaleArray[scope.index] < scope.scaleSmall) {
                            scope.scaleArray[scope.index] = scope.scaleSmall;
                        }
                        if (scope.scaleArray[scope.index] > scope.scaleBig) {
                            scope.scaleArray[scope.index] = scope.scaleBig;
                        }
                        scope.ul.find("li").eq(scope.index).css({
                            "webkitTransform": 'scale(' + scope.scaleArray[scope.index] + ')',
                            "z-index": 1
                        }).siblings().css({
                            "z-index": 0
                        });
                    }
                }
            } catch (e) {
                alert('touchMoveFunc：' + e.message);
            }
        }
    },
    "mouseUp": function (e, scope) {
        var e = e || window.event;
        var evt = e.originalEvent;
        scope.endX = e.clientX;
        var dx = scope.endX - scope.mouseX;
        if (Math.abs(dx) / scope.imgWrapWidth < 0.1) {
            scope.ul.stop().animate({
                "left": -scope.winWidth * scope.index
            }, 200);
        } else {
            if (dx > 0) {
                if (scope.index === 0) {
                    scope.ul.stop().animate({
                        "left": -scope.winWidth * scope.index
                    }, 200, moveEnd);
                } else {
                    scope.ul.stop().animate({
                        "left": -scope.winWidth * (scope.index - 1)
                    }, 200, function () {
                        if (scope.index > 0) {
                            scope.index--;
                            scope.nowIndex.html(scope.index + 1);
                        }
                        moveEnd();
                    });
                }
            } else {
                if (scope.index === (scope.length - 1)) {
                    scope.ul.stop().animate({
                        "left": -scope.winWidth * scope.index
                    }, 200, moveEnd);
                } else {
                    scope.ul.stop().animate({
                        "left": -scope.winWidth * (scope.index + 1)
                    }, 200, function () {
                        if (scope.index < scope.length - 1) {
                            scope.index++;
                            scope.nowIndex.html(scope.index + 1);
                            moveEnd();
                        }
                    });
                }
            }
        }
        scope.mouseStart = 0;
        function moveEnd() {
            scope.ul.find("li").eq(scope.index).css({
                "z-index": 1
            }).siblings().css({
                "z-index": 0
            });
        }
    },
    "slideTouchEnd": function (e, scope) {
        var evt = e.originalEvent;
        var touch = evt.changedTouches[0];
        if (scope.scaleArray[scope.index] > 1) {
            try {
                e.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动
            } catch (e) {
                alert('touchEndFunc：' + e.message);
            }
        } else {
            scope.endX = touch.clientX;
            var dx = scope.endX - scope.startX;
            if (Math.abs(dx) / scope.imgWrapWidth < 0.05) {
                scope.ul.stop().animate({
                    "left": -scope.winWidth * scope.index,
                    "top": 0
                }, 200);
            } else {
                if (dx > 0) {
                    if (scope.index === 0) {
                        scope.ul.stop().animate({
                            "left": -scope.winWidth * scope.index
                        }, 200, moveEnd);
                    } else {
                        scope.ul.stop().animate({
                            "left": -scope.winWidth * (scope.index - 1)
                        }, 200, function () {
                            if (scope.index > 0) {
                                scope.index--;
                                scope.nowIndex.html(scope.index + 1);
                            }
                            moveEnd();
                        });
                    }
                } else {
                    if (scope.index === (scope.length - 1)) {
                        scope.ul.stop().animate({
                            "left": -scope.winWidth * scope.index
                        }, 200, moveEnd);
                    } else {
                        scope.ul.stop().animate({
                            "left": -scope.winWidth * (scope.index + 1)
                        }, 200, function () {
                            if (scope.index < scope.length - 1) {
                                scope.index++;
                                scope.nowIndex.html(scope.index + 1);
                                moveEnd();
                            }
                        });
                    }
                }
            }
        }
        function moveEnd() {
            for (var i = 0; i < scope.length; i++) {
                if (i !== scope.index) {
                    scope.scaleArray[i] = 1;
                }
                scope.ul.find("li").eq(i).css({
                    "webkitTransform": 'scale(' + scope.scaleArray[i] + ')'
                });
            }
            scope.ul.find("li").eq(scope.index).css({
                "z-index": 1
            }).siblings().css({
                "z-index": 0
            });
        }
    }
};

showImagesFn.init({
    "btnName": "imgs_ul",
    "end": function (index, wrapper) {
        wrapper.siblings(".img_percent").find("span").eq(0).html(index + 1);
        var width = wrapper.find("li").width();
        wrapper.find("ul").css("margin-left", - index * width).attr("data-index", index);
    }
});

export default {
    showImagesFn
  }
  